<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage方式存储</title>
</head>
<body>
    <!-- 打开开发者工具 选择Application -->
   <h2>localStorage方式存储</h2> 
   <button onclick="saveDate()">点击保存数据</button>
   <button onclick="redDate()">点击读取数据</button>
   <button onclick="deleteDate()">点击删除数据</button>
   <button onclick="clearDate()">点击清除数据</button>
</body>

<script type="text/javascript">
    let p = {name:'菜菜',age:18}
    // 保存数据 
    function saveDate(){
        // 通过localStorage.setItem给本地浏览器保存了一个数据
        localStorage.setItem('msg','hello')
        localStorage.setItem('name','菜菜')
        // 如果是一个对象则保存的是{Object Object}
        localStorage.setItem('person',p)
        // 通过JSON将对象转成字符串，就可以输出对应内容
        localStorage.setItem('person1',JSON.stringify(p))
    }
    // 读取数据
    function redDate(){
        // 通过localStorage.getItem 读取保存的数据
        console.log(localStorage.getItem('msg'))
        console.log(localStorage.getItem('name'))
        // 将JSON字符串转成对象
        const result = localStorage.getItem('person1')
        console.log(JSON.parse(result))
    }
    // 删除数据
    function deleteDate(){
        // 通过localStorage.removeItem 删除保存的数据
        localStorage.removeItem('msg')
    }
    // 清空数据
    function clearDate(){
        // 通过localStorage.clear 清空保存的数据
        localStorage.clear()
    }
</script>
</html>